<template>
  <div id="attAccountChange">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="组件样式" name="1">
        <ul class="content-list">
          <li>
            <span>图标样式：</span>
            <div>
              <upLoadImage :v='styles.hand[0]' :height="60" :icon=true></upLoadImage>
            </div>
          </li>
<!--          <li>-->
<!--            <span>名称：</span>-->
<!--            <div>-->
<!--              <el-input-->
<!--                type="text"-->
<!--                placeholder="请输入公众号名称"-->
<!--                v-model="styles.tit1"-->
<!--                maxlength="20"-->
<!--                show-word-limit-->
<!--                style="width: 350px"-->
<!--                size="small"-->
<!--              />-->
<!--            </div>-->
<!--          </li>-->
<!--          <li>-->
<!--            <span>描述：</span>-->
<!--            <div>-->
<!--              <el-input-->
<!--                type="text"-->
<!--                placeholder="请输入公众号描述"-->
<!--                v-model="styles.tit2"-->
<!--                maxlength="20"-->
<!--                show-word-limit-->
<!--                style="width: 350px"-->
<!--                size="small"-->
<!--              />-->
<!--            </div>-->
<!--          </li>-->
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames3">
      <el-collapse-item title="内容样式" name="3">
        <ul class="content-list">
<!--          <li>-->
<!--            <span>文字颜色：</span>-->
<!--            <div>-->
<!--              <colorSetting v-model="styles.colorWord" :originColor="styles.colorWord" initColor="#212121"></colorSetting>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li>-->
<!--            <span>背景颜色：</span>-->
<!--            <div>-->
<!--              <colorSetting v-model="styles.colorBg"  :originColor="styles.colorBg" initColor="#fff"></colorSetting>-->
<!--            </div>-->
<!--          </li>-->
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
<!--          <li>-->
<!--            <span>圆角：</span>-->
<!--            <div>-->
<!--              <edgeSetting v-model="styles.circle" unit="px" :max="20" :init="Number(styles.circle)"></edgeSetting>-->
<!--            </div>-->
<!--          </li>-->
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { mapState, mapMutations } from "vuex";
import edgeSetting from "../../comm/edgeSetting";
import uploadUrl from "../../comm/uploadUrl";
import upLoadImage from "../../comm/upLoadImage"
import colorSetting from "../../comm/colorSetting";
export default {
  name: "attAccountChange",
  data() {
    return {
      activeNames: "1",
      activeNames2: "2",
      activeNames3: "3",
    };
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  components: {
    edgeSetting,
    draggable,
    uploadUrl,
    colorSetting,
    upLoadImage
  },
  methods: {},
};
</script>

<style lang='less' scoped>
@import url("../../../assets/css/base.less");
#attAccountChange {
  .add-all {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f7f7f7;
    padding: 20px 30px 10px 20px;
    margin-bottom: 10px;
    margin-left: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    > ul:nth-of-type(1) {
      li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        > span {
          margin-right: 20px;
        }
      }
    }
  }
}
/deep/.el-input.is-exceed .el-input__inner {
  border: 1px solid #dcdee2;
}
/deep/.el-input .el-input__count .el-input__count-inner {
  color: #606266;
}
</style>
